<template>
  <div class="login">
    <div class="login-left">
      <img :src="($route.meta.img as string)" alt="">
    </div>
    <div class="login-right">
      <div class="login-content">
        <!-- 返回 -->
        <div @click="$router.back()" v-show="$route.meta.back" class="back">
          <img style="cursor: pointer;" src="/img/left.png" alt="">
          <span style="cursor: pointer;">返回</span>
        </div>

        <!-- 标题 -->
        <div class="content-title">{{ $route.meta.title }}</div>

        <!-- 副标题 -->
        <div class="content-script">{{ $route.meta.description }}</div>

        <!-- 输入区 -->
        <div class="content-input">
          <div v-for="(item, index) in $route.meta.input" :key="index">
            <div>{{ (item as inputInter).title }}</div>
            <div>
              <input :placeholder="(item as inputInter).placeholder" v-model="num[index].value" :type="(item as inputInter).type" maxlength="30">
            </div>
          </div>
        </div>

        <div v-show="$route.meta.email" class="send-email">
          <div class="email-input">
            <input type="text" placeholder="请输入验证码" maxlength="6">
          </div>
          <div class="email-button" @click="($event) => sendEmail($event)">{{ email ? `重新发送（${ se }）` : "发送验证码" }}</div>
        </div>

        <!-- 验证码区 -->
        <div v-show="$route.meta.check3" ref="otps" class="content-otp">
          <input v-for="(item, index) in vals" :key="index" v-model="item.value" maxlength="1" type="text" autocomplete="off" @input="startInput(index, $event)" @keydown="handleKeyDown($event, index)" />
        </div>

        <!-- 复选框 -->
        <div v-show="$route.meta.check1" class="content-checkbox">
          <div @click="$router.push('/forgotpwd')" class="checkbox-me">
            <!-- <el-checkbox label="记住我" v-model="checked1" /> -->
             忘记密码？
          </div>
          <div @click="$router.push('/register')" class="checkbox-forgotpwd">
            去注册
          </div>
        </div>

        <!-- 同意条款 -->
        <div v-show="$route.meta.check2" class="content-checkbox2">
          <el-checkbox v-model="checked1">
            <span>我同意相关</span>
          <span style="color: #088395;cursor: pointer;">条款和条件</span>
          </el-checkbox>
        </div>

        <!-- 按钮框 -->
        <div class="login-button" @click="buttonHandler">{{ $route.meta.button }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

interface inputInter {
  title: string,
  placeholder: string,
  type: string
}

defineProps(["email", "se"])

const emit = defineEmits(["handler", "sendMsg"])

// 同意条款
const checked1 = ref(false)

const route = useRoute()

// 验证码
const vals = ref<{ value: string }[]>([
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" }
])

// 登录
const loginInputs = ref<{ value: string }[]>([
  { value: "" },
  { value: "" }
])

// 注册
const registerInputs = ref<{ value: string }[]>([
  { value: "" },
  { value: "" },
  { value: "" },
  { value: "" }
])

// 忘记密码
const forgotpwdInputs = ref<{ value: string }[]>([
  { value: "" }
])

// 重置密码
const resetpwdInputs = ref<{ value: string }[]>([
  { value: "" },
  { value: "" }
])

const num = computed(() => {
  switch (route.meta.id) {
    case 1:
      return loginInputs.value
    case 2:
      return registerInputs.value
    case 3:
      return forgotpwdInputs.value
    case 5:
      return resetpwdInputs.value
    default:
      return []
  }
})

const reg = /^\d$/
const otps = ref()

const msg = ref("")

onMounted(() => {
  // 当页面加载进来时，第一个输入框应该处于聚焦状态
  ((otps.value as HTMLElement).children[0] as HTMLInputElement).focus()
})

// 逻辑：监听键盘输入事件，输入一个数字后自动跳入下一个框，到达最后一个框就自动失焦
const startInput = (index: number, event: Event) => {
  const target = event.target as HTMLInputElement
  const value = target.value

  if (reg.test(value)) {
    vals.value[index].value = value

    if (index < vals.value.length - 1) {
      (target.nextElementSibling as HTMLInputElement).focus()
    }
  } else {
    // 如果输入的不是数字，则清除该输入框的内容
    target.value = ''
    vals.value[index].value = ''
  }
}

// 监听键盘的退格键，若用户按下退格，则跳入上一个框，否则自动失焦
const handleKeyDown = (event:KeyboardEvent, index:number) => {
  const key = event.key

  // 处理backspace
  if (key == "Backspace" && vals.value[index].value == "") {
    const last = (event.target as HTMLInputElement).previousElementSibling as HTMLInputElement
    if (last && index > 0) last.focus()
  }

  // 阻止非数字输入
  if (key != "Backspace" && !reg.test(key)) event.preventDefault()
}

// 用户点击按钮
const buttonHandler = () => {
  if (route.meta.id == 4)
    emit("handler", vals.value.reduce((previous:string, current:{ value:string }) => previous + current.value, ""))
  else emit("handler", num.value)
}

// 用户点击发送验证码功能
const sendEmail = (event:MouseEvent) => emit("sendMsg", event, num.value)
</script>

<style lang="less" scoped>
.login {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;

  .login-left {
    width: 55%;
    height: 100%;
    overflow: hidden;

    img {
      width: 100%;
      position: relative;
      top: -170px;
    }
  }

  .login-right {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-content {
      width: 445px;

      .back {
        width: 100%;
        position: relative;
        margin-bottom: 30px;

        img {
          position: absolute;
          width: 18px;
          top: 24%;
        }

        span {
          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;
          display: inline-block;
          margin-left: 20px;
        }
      }

      .content-title {
        color: rgb(20, 28, 29);
        font-family: 'Helvetica';
        font-size: 30px;
        font-weight: 700;
        line-height: 34px;
        letter-spacing: 0%;
        text-align: left;
      }

      .content-script {
        color: rgb(163, 170, 171);
        font-family: Epilogue;
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0%;
        text-align: left;
        margin-top: 10px;
      }

      .content-input {
        display: flex;
        flex-direction: column;
        margin-top: 35px;

        > div:not(:first-child) {
          margin-top: 18px;
        }

        > div > div:first-child {
          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 12px;
          font-weight: 400;
          line-height: 16px;
          letter-spacing: 0%;
          text-align: left;
          margin-bottom: 7px;
        }

        > div > div:last-child input {
          width: 100%;
          height: 50px;
          border-radius: 10px;
          box-sizing: border-box;
          border: 1px solid rgb(20, 28, 29);
          display: flex;
          align-items: center;
          padding: 0 10px;

          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 15px;
          font-weight: 400;
          line-height: 30px;
        }
      }

      .send-email {
        width: 100%;
        margin-top: 35px;
        display: flex;
        justify-content: space-between;

        .email-input {
          width: 60%;

          input {
            width: 100%;
            height: 50px;
            border-radius: 10px;
            box-sizing: border-box;
            border: 1px solid rgb(20, 28, 29);
            display: flex;
            align-items: center;
            padding: 0 10px;

            color: rgb(20, 28, 29);
            font-family: Epilogue;
            font-size: 15px;
            font-weight: 400;
            line-height: 30px;
          }
        }

        .email-button {
          cursor: pointer;
          width: 33%;
          height: 50px;
          border-radius: 10px;
          background: rgb(8, 131, 149);
          display: flex;
          align-items: center;
          justify-content: center;

          color: rgb(255, 255, 255);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0%;
          text-align: left;
          transition: background 0.4s;
        }

        .email-button:hover {
          background: rgb(22, 162, 184);
        }
      }

      .content-checkbox {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        .checkbox-me {
          color: rgb(20, 28, 29);
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
        }

        .checkbox-forgotpwd {
          color: rgb(20, 28, 29);
          font-size: 14px;
          font-weight: 400;
          cursor: pointer;
        }
      }

      .content-checkbox2 {
        margin-top: 18px;
        label {
          font-family: Epilogue;
          font-size: 16px;
          line-height: 30px;
        }
      }

      .content-otp {
        display: flex;
        width: 100%;
        justify-content: space-between;
        
        input {
          width: 56px;
          height: 56px;
          border: 1px solid #A3AAAB33;
          text-align: center;
          border-radius: 10px;

          color: rgb(20, 28, 29);
          font-family: Epilogue;
          font-size: 24px;
          font-weight: 700;
          line-height: 28px;
        }
      }

      .login-button {
        cursor: pointer;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background: rgb(8, 131, 149);
        display: flex;
        align-items: center;
        justify-content: center;

        color: rgb(255, 255, 255);
        font-family: Epilogue;
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0%;
        text-align: left;
        transition: background 0.4s;
        margin-top: 34px;
      }

      .login-button:hover {
        background: rgb(22, 162, 184);
      }
    }
  }
}
</style>